<template>
  <div class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" ref="fleetsearchform" @keyup.enter.native="getDatafleetList()">
        <el-row>
          <el-form-item prop="name" label="车队名称">
            <el-input v-model="dataForm.name" placeholder="车队名称" clearable></el-input>
          </el-form-item>
          <el-form-item prop="id" label="车队编号">
            <el-input v-model="dataForm.id" placeholder="车队编号" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button class="el-button--primary" @click="getDatafleetList()">查询</el-button>
            <el-button class="el-button--warning" @click="fleetresetdateform('fleetsearchform')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-row>
        <el-button class="el-button--success" @click="addfleetVisible = true">+新增车队</el-button>
      </el-row><br>
      <el-table
        :data="datafleetList"
        border
        v-loading="datafleetListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="fleetNumber"
          header-align="center"
          align="center"
          label="车队编号">
        </el-table-column>
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="车队名称">
        </el-table-column>
        <el-table-column
          prop="agencyname"
          header-align="center"
          align="center"
          label="所属机构">
        </el-table-column>
        <el-table-column
          prop="trucknumber"
          header-align="center"
          align="center"
          label="车辆总数">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          label="车辆详情">
          <tmplate slot-scope="scope">
            <span><a href="#" @click="gettruckinfo(scope.row.id)">车辆列表</a></span>
          </tmplate>
        </el-table-column>
        <el-table-column
          prop="drivernumber"
          header-align="center"
          align="center"
          label="司机总数">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          label="司机详情">
          <tmplate slot-scope="scope">
            <span><a href="#" @click="getdriverinfo(scope.row.id)">司机列表</a></span>
          </tmplate>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updatefleetbyid(scope.row.id)">编辑</el-button>&nbsp;
            <el-button type="text" size="small" @click="deletefleet(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>


    <el-dialog custom-class="addfleetwidth" title="新增车队" :visible.sync="addfleetVisible" :close-on-click-modal="false">

      <el-tabs type="border-card">
        <el-form ref="addfleetform" label-width="80px">
            <el-row>
              <el-form-item class="el-col-11" label="车队名称" prop="name">
                <el-input v-model="adddataForm.name" placeholder="车队名称"></el-input>
              </el-form-item>
            </el-row>
          <el-row>
            <el-form-item class="el-col-8" prop="cororg" label="所属机构">
              <el-select v-model="adddataForm.cororg" placeholder="所属机构">
                <el-option id="status" label="请选择" value="0" aria-selected="true" ></el-option>
                <el-option
                  v-for="item in clist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addfleetSubmit()">保存</el-button>
        <el-button @click="addfleetVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑车队" :visible.sync="updatefleetVisible" :close-on-click-modal="false">

      <el-tabs type="border-card">
        <el-form ref="updatefleetform"  label-width="80px">
          <el-row>
            <el-form-item class="el-col-11" prop="name" label="车队名称">
              <el-input v-model="updatedataForm.name" placeholder="车队名称" clearable></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item class="el-col-8" prop="cororg" label="所属机构">
              <el-select v-model="adddataForm.cororg" placeholder="所属机构">
                <el-option id="ustatus" label="请选择" value="0" aria-selected="true" ></el-option>
                <el-option
                  v-for="item in clist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatefleet()">编辑</el-button>
        <el-button @click="updatefleetVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog custom-class="truckcustomwidth" title="车辆列表" :visible.sync="fleettruckVisible" :close-on-click-modal="false">
      <el-tabs>
        <el-table
          :data="datatruckList"
          border
          v-loading="datatruckListLoading"
          style="width: 100%;">
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="车辆编号">
          </el-table-column>
          <el-table-column
            prop="truckTypename"
            header-align="center"
            align="center"
            label="车辆类型">
          </el-table-column>
          <el-table-column
            prop="车牌号码"
            header-align="center"
            align="center"
            label="所属机构">
          </el-table-column>
          <el-table-column
            prop="licensePlate"
            header-align="center"
            align="center"
            label="车牌号码">
          </el-table-column>
          <el-table-column
            prop="deviceGpsId"
            header-align="center"
            align="center"
            label="GpsId">
          </el-table-column>
          <el-table-column
            prop="allowableLoad"
            header-align="center"
            align="center"
            label="准载重量（千克）">
          </el-table-column>
          <el-table-column
            prop="allowableVolume"
            header-align="center"
            align="center"
            label="准载体积（方）">
          </el-table-column>
          <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="过期状态">
          </el-table-column>
          <el-table-column
            prop="truckNumber"
            header-align="center"
            align="center"
            label="车次编号">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="truckdetails(scope.row.id)">查看详情</el-button>&nbsp;
              <el-button type="text" size="small" @click="deletetruck(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
      <el-button @click="fleettruckVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog custom-class="srivercustomwidth" title="司机列表" :visible.sync="fleetdriverVisible" :close-on-click-modal="false">

      <el-tabs>
        <el-table
          :data="datadriverList"
          border
          v-loading="datadriverListLoading"
          style="width: 100%;">
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="司机编号">
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="司机姓名">
          </el-table-column>
          <el-table-column
            prop="phone"
            header-align="center"
            align="center"
            label="司机电话">
          </el-table-column>
          <el-table-column
            prop="coreOrgname"
            header-align="center"
            align="center"
            label="所属机构">
          </el-table-column>
          <el-table-column
            prop="fleetname"
            header-align="center"
            align="center"
            label="所属车队">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updatefleetbyid(scope.row.id)">编辑</el-button>&nbsp;
              <el-button type="text" size="small" @click="deletefleet(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fleetdriverVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
.truckcustomwidth{
  width: 80%;
}
.srivercustomwidth{
  width: 80%;
}
.addfleetwidth {
  width: 60%;
}

</style>

<script src="src/api/work.js"></script>
<script>
import {
  addfleet,
  delfleetbyid, getcororg, getcororglist,
  getdriverlist,
  getfleetbyid,
  getfleetinfo,
  gettrucklist,
  updatefleet
} from '../../../api/base'

export default {
  data() {
    return {
      dataForm: {
        name: '',
        id: '',
      },
      adddataForm: {
        name: '',
        cororg: '',
      },
      updatedataForm: {
        name: '',
        cororg: '',
      },
      datafleetList: [],
      pageIndex: 1,
      pageSize: 10,
      total: null,
      datafleetListLoading: false,
      datafleetListSelections: [],
      addfleetVisible: false,
      updatefleetVisible : false,
      fleettruckVisible: false,
      fleetdriverVisible: false,
      datatruckList: [],
      datatruckListLoading: false,
      datadriverList: [],
      datadriverListLoading: false,
      item: {
        type: '',
        lable: ''
      },
      clist: []
    }
  },
  mounted() {
    this.getDatafleetList();
    this.getcoreorg();
  },
  methods: {
    fleetresetdateform() {
      this.$refs['fleetsearchform'].resetFields();
      this.dataForm.courierid = "请选择";
      this.getDatafleetList();
    },
    // 获取数据列表
    getDatafleetList() {
      this.datafleetListLoading = true
      let params = {
        'pageno': this.pageIndex,
        'pagesize': this.pageSize,
        'name': this.dataForm.name,
        'id': this.dataForm.id,
      }
      getfleetinfo(params).then(({data}) => {
        if (data && data.code == 0) {
          this.datafleetList = data.page.rows
          this.total = data.page.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        this.datafleetListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDatafleetList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDatafleetList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.datafleetListSelections = val
    },

    addfleetSubmit() {
      addfleet(this.adddataForm).then(({data}) => {
          if (data && data.code == 0) {
            this.$message({
              message: '新增成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.addfleetVisible = false
                this.$refs['addfleetform'].resetFields()
                this.getDatafleetList()
              }
            })
          }
      })

    },
    updatefleetbyid(id) {
      getfleetbyid(id).then(({data}) => {
        this.updatedataForm.name = data.name
        this.updatedataForm.cororg = data.cororg
      })
      this.updatefleetVisible = true;
    },
    updatefleet(){
      updatefleet(this.updatedataForm).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '编辑成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              // this. = false
              this.$refs['updatefleetform'].resetFields()
              this.getDatafleetList()
            }
          })
        }
      })
    },
    deletefleet(id){
      delfleetbyid(id).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '删除成功',
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.getDatafleetList()
            }
          })
        }
      })
    },
    gettruckinfo(id){
      gettrucklist(id).then(({data}) => {
        this.datatruckList = data;
      })
      this.fleettruckVisible=true;
    },
    getdriverinfo(id){
      getdriverlist(id).then(({data}) => {
        this.datadriverList = data;
      })
      this.fleetdriverVisible = true;
    },

    getcoreorg() {
      getcororglist().then(({data}) => {
        this.clist = data.page.list;
      })
    },

    /*   车队位置  */
    fleetlocation(){

    },
  }
}

/*

*  */
</script>
